<template>
  <view class="select-org-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="arrowleft" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">请选择机构</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 说明文字 -->
    <view class="instruction">
      请选择需要登录的机构
    </view>
    
    <!-- 机构列表 -->
    <view class="org-list">
      <view 
        class="org-item" 
        v-for="(org, index) in orgList" 
        :key="org.id"
        @click="selectOrg(org)"
      >
        <view class="org-icon">
          <uni-icons type="briefcase" size="24" color="#fff"></uni-icons>
        </view>
        <view class="org-info">
          <view class="org-name">{{ org.name }}</view>
          <view class="org-id">机构编号: {{ org.id }}</view>
          <view class="org-time">创建时间: {{ org.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { login } from '@/common/api.js'

export default {
  data() {
    return {
      phoneNo: '',
      passwd: '',
      orgList: [
        {
          id: 52,
          name: '广州亿付联网络科技有限公司',
          createTime: '2023-10-25 15:10:38'
        },
        {
          id: 89,
          name: '亿付联-李果',
          createTime: '2024-11-21 16:17:31'
        },
        {
          id: 92,
          name: '创联助手',
          createTime: '2024-12-11 11:28:21'
        }
      ]
    }
  },
  onLoad(options) {
    // 接收从登录页面传递的参数
    if (options.phoneNo) {
      this.phoneNo = options.phoneNo
    }
    if (options.passwd) {
      this.passwd = options.passwd
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    selectOrg(org) {
      console.log('选择机构:', org)
      
      // 显示加载提示
      uni.showLoading({
        title: '登录中...',
        mask: true
      })
      
      // 调用登录接口进行二次登录
      const loginData = {
        phoneNo: this.phoneNo,
        passwd: this.passwd
      }
      
      login(loginData).then((res) => {
        uni.hideLoading()
        
        if (res.status === 200 || res.status === 0) {
          // 存储登录信息
          uni.setStorageSync('TOKEN_KEY', res.data.token)
          uni.setStorageSync('merchantId', res.data.merchantId)
          uni.setStorageSync('selectedOrg', org)
          uni.setStorage({
            key: 'USER_KEY',
            data: res.data
          })
          
          // 显示成功提示并跳转到首页
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1500,
            success: () => {
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/index/index'
                })
              }, 1500)
            }
          })
        } else {
          uni.showToast({
            title: res.message || '登录失败',
            icon: 'none',
            duration: 2000
          })
        }
      }).catch((error) => {
        uni.hideLoading()
        console.error('登录失败:', error)
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped>
.select-org-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left, .nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 说明文字 */
.instruction {
  padding: 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f5f5f5;
}

/* 机构列表 */
.org-list {
  padding: 0 30rpx;
}

.org-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.org-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #007AFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.org-info {
  flex: 1;
}

.org-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.org-id, .org-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.org-time {
  margin-bottom: 0;
}
</style>